<template>
  <div>
    <h1>{{ count }}</h1>
    <Child />
    <router-link to="/home?q=123&w=567">home</router-link>
    <router-link to="/list">list</router-link>
    <router-link to="/goods/123">123</router-link>
    <router-link to="/goods/456">456</router-link>
    <router-link to="/goods/789">789</router-link>
    <router-view></router-view>
  </div>
</template>

<script>
import { useStore } from 'vuex'
import { computed, watch } from 'vue'
import Child from './child'
import { useRoute } from 'vue-router'
export default {
  components: { Child },
  setup() {
    let store = useStore(); // 等价于 this.$store
    let route = useRoute()
    console.log(store)
    let count = computed(() => store.state.count)
    watch(route, () => {
      // watch:{$route(){}}
      console.log('route')
    })
    return {
      count: count
    }
  }
}
</script>
